<template>
  <div>
    <!--工具栏-->
    <div class="toolbar">
      <el-form :inline="true" :model="filters" :size="size" ref="filters" label-width="120px" class="search">
        <el-row class="search-input">
          <el-form-item label="商户名称：">
            <el-input v-model="filters.merchantName" clearable placeholder="商户名称"></el-input>
          </el-form-item>
          <el-form-item label="商户code：">
            <el-input v-model="filters.merchantCode" clearable placeholder="商户code"></el-input>
          </el-form-item>
          <el-form-item label="订单编号：">
            <el-input v-model="filters.orderNo" clearable placeholder="订单编号"></el-input>
          </el-form-item>
          <el-form-item label="下单时间：">
            <el-date-picker v-model="filters.buyTime"
                            clearable
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                            value-format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
          <el-form-item label="来源渠道：">
            <el-select v-model="filters.sources" clearable placeholder="全部">
              <el-option label="全部" :value="0"></el-option>
              <el-option label="APP" :value="1"></el-option>
              <el-option label="商品小程序" :value="2"></el-option>
              <el-option label="企业微信" :value="3"></el-option>
              <el-option label="We2000公众号" :value="4"></el-option>
              <el-option label="商城公众号" :value="5"></el-option>
              <el-option label="其他" :value="6"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="订单来源：">
            <el-select v-model="filters.activitySource" clearable placeholder="全部">
              <el-option label="全部" :value="0"></el-option>
              <el-option label="拼团" :value="1"></el-option>
              <el-option label="秒杀" :value="2"></el-option>
              <el-option label="预售" :value="3"></el-option>
              <el-option label="抽奖" :value="4"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="收货人：">
            <el-input v-model="filters.receiverName" clearable placeholder="收货人"></el-input>
          </el-form-item>
          <el-form-item label="收货人手机：">
            <el-input v-model="filters.consigneePhone" clearable placeholder="收货人手机"></el-input>
          </el-form-item>
          <el-form-item label="商品名称：">
            <el-input v-model="filters.goodsName" clearable placeholder="商品名称"></el-input>
          </el-form-item>
          <el-form-item label="商品编码：">
            <el-input v-model="filters.commodityCode" clearable placeholder="商品编码"></el-input>
          </el-form-item>
          <el-form-item label="订单类型：">
            <el-select v-model="filters.orderTypeB" clearable placeholder="全部">
              <el-option label="全部" :value="0"></el-option>
              <el-option label="积分订单" :value="1"></el-option>
              <el-option label="普通订单" :value="2"></el-option>
              <el-option label="分期订单" :value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="收货人地址：">
            <el-cascader v-model="filters.receiverAddress" clearable style="width:160px;"
                         :options="options"></el-cascader>
          </el-form-item>
        </el-row>

        <!-- 查询 重置部分 -->
        <el-row class="search-button">
          <el-col class="mb20">
            <kt-button icon="fa fa-search" :label="$t('action.search')" type="primary" @click="findPage()"/>
            <kt-button icon="fa fa-refresh" :label="$t('action.reset')" type="primary" @click="resetForm()"/>
            <!--            <el-button type="primary" size="small" @click="addForm()">新增</el-button>-->

          </el-col>
        </el-row>
      </el-form>
    </div>

    <!--订单异常列表-->
    <el-table :data="pageResult"
              style="width: 100%"
              :stripe="true"
              :header-cell-style="{ 'color': '#FFF','background-color': '#2F4554'}"
              @selection-change="selectionChange"
              :size="size"
              align="align">
      <el-table-column type="selection" :selectable="selectTable"  width="50"></el-table-column>
      <el-table-column prop="goodsName" label="商品名称" sortable width="200"></el-table-column>
      <el-table-column prop="orderNo" label="订单编号" sortable width="200"></el-table-column>
      <el-table-column prop="orderTypeB" label="订单类型" sortable width="200">
        <template slot-scope="scope">
          <span v-if="scope.row.orderTypeB == 0" size="mini" type="primary">全部</span>
          <span v-if="scope.row.orderTypeB == 1" size="mini" type="primary">积分订单</span>
          <span v-if="scope.row.orderTypeB == 2" size="mini" type="primary">普通订单</span>
          <span v-if="scope.row.orderTypeB == 3" size="mini" type="primary">分期订单</span>
        </template>
      </el-table-column>
      <el-table-column prop="sources" label="来源渠道" sortable width="200">
        <template slot-scope="scope">
          <span v-if="scope.row.sources == 0" size="mini" type="primary">全部</span>
          <span v-if="scope.row.sources == 1" size="mini" type="primary">APP</span>
          <span v-if="scope.row.sources == 2" size="mini" type="primary">商品小程序</span>
          <span v-if="scope.row.sources == 3" size="mini" type="primary">企业微信</span>
          <span v-if="scope.row.sources == 4" size="mini" type="primary">We2000公众号</span>
          <span v-if="scope.row.sources == 5" size="mini" type="primary">商城公众号</span>
          <span v-if="scope.row.sources == 6" size="mini" type="primary">其他</span>
        </template>
      </el-table-column>
      <el-table-column prop="orderSources" label="订单来源" sortable width="200">

        <template slot-scope="scope">
          <span v-if="scope.row.orderSources == 0" size="mini" type="primary">全部</span>
          <span v-if="scope.row.orderSources == 1" size="mini" type="primary">拼团</span>
          <span v-if="scope.row.orderSources == 2" size="mini" type="primary">秒杀</span>
          <span v-if="scope.row.orderSources == 3" size="mini" type="primary">预售</span>
          <span v-if="scope.row.orderSources == 3" size="mini" type="primary">抽奖</span>
        </template>
      </el-table-column>
      <el-table-column prop="productType" label="商品类型" sortable width="200"></el-table-column>
      <el-table-column prop="buyTime" label="下单日期" sortable width="200"></el-table-column>
      <el-table-column prop="buyerUsername" label="下单会员账号" sortable width="200"></el-table-column>
      <el-table-column prop="discountTotalAmount" label="订单优惠金额合计" sortable width="200"></el-table-column>
      <el-table-column prop="actualPayTotalAmount" label="订单支付金额合计" sortable width="200"></el-table-column>
      <el-table-column prop="orderCumtrapz" label="订单积分合计" sortable width="200"></el-table-column>

      <el-table-column prop="orderStatus" label="支付状态" sortable width="200">

        <template slot-scope="scope">
          <span v-if="scope.row.orderStatus ==11" size="mini" type="primary">已结算</span>
          <span v-if="scope.row.orderStatus == 1" size="mini" type="primary">待支付</span>
          <span v-if="scope.row.orderStatus == 2" size="mini" type="primary">已支付</span>
          <span v-if="scope.row.orderStatus == 3" size="mini" type="primary">待发货</span>
          <span v-if="scope.row.orderStatus == 4" size="mini" type="primary">已发货</span>
          <span v-if="scope.row.orderStatus == 5" size="mini" type="primary">确认收货</span>
          <span v-if="scope.row.orderStatus == 6" size="mini" type="primary">待评价</span>
          <span v-if="scope.row.orderStatus == 7" size="mini" type="primary">已关闭</span>
          <span v-if="scope.row.orderStatus == 8" size="mini" type="primary">付款处理中</span>
          <span v-if="scope.row.orderStatus == 9" size="mini" type="primary">已退款</span>
          <span v-if="scope.row.orderStatus == 10" size="mini" type="primary">已完成</span>
        </template>

      </el-table-column>
      <el-table-column prop="balanceSts" label="结算状态" sortable width="200">
        <template slot-scope="scope">
          <span v-if="scope.row.balanceSts == 0" size="mini" type="primary">全部</span>
          <span v-if="scope.row.balanceSts == 1" size="mini" type="primary">未清算</span>
          <span v-if="scope.row.balanceSts == 2" size="mini" type="primary">已清算</span>
          <span v-if="scope.row.balanceSts == 3" size="mini" type="primary">扎差中</span>
          <span v-if="scope.row.balanceSts == 4" size="mini" type="primary">已轧差</span>
        </template>
      </el-table-column>
      <el-table-column prop="payment" label="支付方式" sortable width="200">
        <template slot-scope="scope">
          <span v-if="scope.row.payment == 0" size="mini" type="primary">全部</span>
          <span v-if="scope.row.payment == 1" size="mini" type="primary">微众分期</span>
          <span v-if="scope.row.payment == 2" size="mini" type="primary">We2000</span>
          <span v-if="scope.row.payment == 3" size="mini" type="primary">微信支付</span>
          <span v-if="scope.row.payment == 4" size="mini" type="primary">微众银行储蓄卡</span>
        </template>
      </el-table-column>
      <el-table-column prop="whetherInvoice" label="是否需要开发票" sortable width="200"></el-table-column>

    </el-table>
    <div class="search-wrap">
      <el-form :inline="true" :model="imgDataForm" ref="searchFilters" label-position="right" label-width="200px">
        <el-form-item label="异常原因">
          <el-input type="textarea" style="width: 500px;" v-model="imgDataForm.reason"></el-input>
        </el-form-item>
        <el-form-item label="异常附件：">
          <el-upload :action="imgUpload" list-type="picture-card"
                     v-model="imgDataForm.enclosure"
                     :on-success="handlePicSuccess"
                     :on-exceed="handleExceed" accept="image/gif, image/jpeg, image/jpg, image/png, image/svg"
                     :on-remove="handlePicRemove" :limit="picLimit" style="float:left" ref="pic_upload"
                     :file-list="picList" :disabled="this.disabled">
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-form>
    </div>
    <!-- 查询 重置部分 -->
    <el-row class="search-button">
      <el-col class="mb20">
        <el-button type="primary" size="small" @click="addForm()">保存</el-button>
        <el-button type="primary" size="small" @click="submitForm()">提交</el-button>
        <el-button type="primary" size="small" @click="handleClose()">返回</el-button>

      </el-col>
    </el-row>

    <!--分页栏-->
    <div class="toolbar" style="padding:10px;">
      <el-pagination layout="total, prev, pager, next, jumper,sizes"
                     @current-change="refreshPageRequest"
                     @size-change="handleSizeChange"
                     :current-page="pageRequest.pageNum"
                     :page-size="pageRequest.pageSize"
                     :total="totalSize"
                     style="float:right;"
                     :page-sizes="[10, 20, 30, 40]"></el-pagination>
    </div>
  </div>
</template>

<script>
  import KtButton from '@/views/Core/KtButton'
  import citys from '../../../../static/json/Paje/citys'

  export default {
    name: 'abnormalEvent',
    components: {KtButton},
    data() {
      return {
        size: 'small',
        options: citys,
        editDialogVisible: false,
        dialogVisible: false,
        imgUpload: this.utils.imgUploadUrl,
        picLimit: 1,
        picList: [],
        imgDataForm:[],
        filters: {
          buyerUsername: "",
          businessCode: "",
          businessName: "",
          orderNo: "",
          thirdPartyOrderNo: "",
          orderType: "",
          sourceChannel: "",
          activitySource: "",
          receiverName: "",
          receiverPhone: "",
          receiverAddress: "",
          productName: "",
          productNo: "",
          phoneNumber: "",
          WaybillNo: "",
          paymentMethod: "",
          needToInvoice: "",
          settlementStatus: "",
          OrderLabel: "",
          payType: "",
          orderCreateTime: "",
          fileUrls: "",
        },
        receiverAddress: [],
        orderCreateTime: [],
        remarkTime: [],
        createTime: [],
        pageResult: [],
        totalSize: 0,
        pageRequest: {pageNum: 1, pageSize: 10},
        dataForm: {ids: [], remark: '', remarkStatus: 0},
        dataFormRules: {remark: [{required: true, message: '请输入处理备注', trigger: 'blur'}]},
        selectionChangeList: [],
        updateParams: [],
      }
    },
    mounted() {
      this.findPage()
    },
    methods: {
      // 复选框选择的值
      selectionChange(params) {
        this.selectionChangeList.push(params);
      },

      // logo上传
      handlePicSuccess: function (res, file) {
        if (res.code == "0000") {
          this.imgDataForm.enclosure = res.data.imgUrl;
          let imgUrl = {};
          imgUrl.url = res.data.imgUrl;
          this.picList.push(imgUrl);
        }
      },
      //文件上传数量限制
      handleExceed: function () {
        this.$alert("最多上传一个", "警告", {
          confirmButtonText: "确定"
        });
      },

      //文件移除
      handlePicRemove(file, picList) {
        if (picList && picList.length == 0) {
          this.imgDataForm.enclosure = "";
        }
        this.picList = picList
      },

      //查询
      findPage() {
        let this_ = this;
        this.utils.request.queryPageOrderList(this_.filters, function (res) {
          if (res.code == '0000') {
            this_.pageResult = res.data.list;
            this_.totalSize = res.data.total;
          } else {
            this_.pageResult = [];
            this_.totalSize = 0;
          }
        })
      },
      addForm() {
        let this_ = this;
        if (this_.selectionChangeList.length < 1) {
          this_.$message({message: "必须选中一条数据", type: "warning"});
          return false;
        }
        this_.$refs.filters.validate(valid => {
          if (valid) {
            this_.$confirm("确认保存吗？", "提示", {}).then(() => {
              let params = {};
              params.selectionChangeList = this_.selectionChangeList[0];
              params.status=0;
              this.utils.request.saveMAbnormalEvent(params, function (res) {
                if (res.code === "0000") {
                  this_.$message({message: "操作成功", type: "success"});
                  this_.$emit("reloadPage");
                } else {
                  this_.$message({message: "操作失败", type: "error"});
                }
              });
            });
          }
        });

      },
      submitForm() {
        let this_ = this;
        if (this_.selectionChangeList.length < 1) {
          this_.$message({message: "必须选中一条数据", type: "warning"});
          return false;
        }
        this_.$refs.filters.validate(valid => {
          if (valid) {
            this_.$confirm("确认提交吗？", "提示", {}).then(() => {
              let params = {};
              params.selectionChangeList = this_.selectionChangeList[0];
              params.status=1;
              // params.imgDataForm=this_.imgDataForm;
              this.utils.request.saveMAbnormalEvent(params, function (res) {
                if (res.code === "0000") {
                  this_.$message({message: "操作成功", type: "success"});
                  this_.$emit("reloadPage");
                } else {
                  this_.$message({message: "操作失败", type: "error"});
                }
              });
            });
          }
        });

      },
      handleClose(){
        this.$emit("reloadPage");
      },
      // 每页数据刷新
      refreshPageRequest: function (pageNum) {
        this.pageRequest.pageNum = pageNum;
        this.findPage();
      },
      // 每页条数刷新
      handleSizeChange: function (pageSize) {
        this.pageRequest.pageSize = pageSize;
        this.findPage();
      },


      resetForm() {
        this.filters = {};
        this.receiverAddress = [];
        this.orderCreateTime = [];
        this.remarkTime = [];
        this.createTime = [];
        this.findPage();
      }
      // 数据转化文字
      // 异常原因分类(需要建立对应的字典暂时定义) 1.校验错误， 2.系统异常, 3.库存问题, 4.其他,
      /*formatterErrotType(row, column, prop) {
        if (prop == 1) {
          return "校验错误";
        } else if (prop == 2) {
          return "系统异常";
        } else if (prop == 3) {
          return "库存问题";
        } else if (prop == 4) {
          return "其他";
        }
      },
      formatterErrotObject(row, column, prop) {
        if (prop == 1) {
          return "订单";
        } else if (prop == 2) {
          return "预订单";
        }
      },
      // 异常原因(需要字典表暂时按照这个)1.仓库库存不足, 2.其他, 3.参数有误
      formatterErrotReason(row, column, prop) {
        if (prop == 1) {
          return "仓库库存不足";
        } else if (prop == 2) {
          return "其他";
        } else if (prop == 3) {
          return "参数有误";
        }
      },
      formatterRemarkStatus(row, column, prop) {
        if (prop == 1) {
          return "待处理";
        } else if (prop == 2) {
          return "已处理";
        }
      },*/

      // 禁用复选框
      // selectTable(row, index) {
      //   if (row.remarkStatus == 1) {
      //     return true;
      //   } else if (row.remarkStatus == 2) {
      //     return false;
      //   }
      // },
      // 清空
    }
  };
</script>

<style scoped lang='scss'>
  /* 搜索样式重置 */
  .search /deep/ .el-form-item__content {
    width: 160px;
  }

  .search /deep/ .el-select {
    width: 160px !important;
  }

  .search /deep/ .el-date-editor.el-input__inner {
    width: 220px !important;
  }

  .search .manager /deep/ .el-form-item {
    width: 70px !important;
  }

  .clearfix {
    text-align: left;
  }

  .box-card {
    margin-bottom: 20px;
  }

  .jiesuan {
    margin-left: 10px;
  }

  .el-tabs {
    margin-bottom: 20px;
  }

  .orderDetail {
    margin: 20px;
    font-size: 14px;
  }

  .el-col {
    border-radius: 4px;
    color: #58666e !important;
  }

  .bg-purple {
    text-align: left;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .row-bg {
    padding: 10px 0;
  }

  .mb20 {
    margin-bottom: 20px;
  }
</style>
